

import React, { useState } from 'react';
import { View, Text, ScrollView, TouchableOpacity, Image, Modal, Alert } from 'react-native';
import { SafeAreaView } from 'react-native-safe-area-context';
import { useRouter } from 'expo-router';
import { FontAwesome5, FontAwesome6 } from '@expo/vector-icons';
import { LinearGradient } from 'expo-linear-gradient';
import AsyncStorage from '@react-native-async-storage/async-storage';
import styles from './styles';

const UserCenterScreen = () => {
  const router = useRouter();
  const [isLogoutModalVisible, setIsLogoutModalVisible] = useState(false);

  const handleProfilePress = () => {
    console.log('跳转到我的资料页面');
    // 目前PRD中未定义该页面，暂时只打印日志
  };

  const handleNotificationPress = () => {
    router.push('/p-notification_settings');
  };

  const handleSecurityPress = () => {
    console.log('跳转到账户安全页面');
    // 目前PRD中未定义该页面，暂时只打印日志
  };

  const handleAboutPress = () => {
    router.push('/p-about_us');
  };

  const handleLogoutPress = () => {
    setIsLogoutModalVisible(true);
  };

  const handleCancelLogout = () => {
    setIsLogoutModalVisible(false);
  };

  const handleConfirmLogout = async () => {
    try {
      // 清除本地存储的用户信息
      await AsyncStorage.removeItem('@userToken');
      await AsyncStorage.removeItem('@userInfo');
      
      setIsLogoutModalVisible(false);
      
      // 跳转到登录页，使用replace避免返回
      router.replace('/p-login');
    } catch (error) {
      console.error('退出登录失败:', error);
      Alert.alert('错误', '退出登录失败，请重试');
    }
  };

  const handleModalBackgroundPress = () => {
    setIsLogoutModalVisible(false);
  };

  return (
    <SafeAreaView style={styles.container}>
      <ScrollView style={styles.scrollView} showsVerticalScrollIndicator={false}>
        {/* 顶部用户信息区域 */}
        <LinearGradient
          colors={['#969FFF', '#5147FF', '#3E3987']}
          start={{ x: 0, y: 0 }}
          end={{ x: 1, y: 1 }}
          style={styles.userHeader}
        >
          <View style={styles.userInfo}>
            <Image
              source={{ uri: 'https://s.coze.cn/image/CZ5EV0RK7B0/' }}
              style={styles.userAvatar}
            />
            <View style={styles.userDetails}>
              <Text style={styles.userName}>张明</Text>
              <Text style={styles.userDepartment}>技术部 · 总监</Text>
              <Text style={styles.userEmail}>zhangming@company.com</Text>
            </View>
            <View style={styles.userBadge}>
              <Text style={styles.userBadgeText}>高级用户</Text>
            </View>
          </View>
          
          {/* 用户统计信息 */}
          <View style={styles.userStats}>
            <View style={styles.statItem}>
              <Text style={styles.statValue}>156</Text>
              <Text style={styles.statLabel}>总审批数</Text>
            </View>
            <View style={styles.statItem}>
              <Text style={styles.statValue}>98%</Text>
              <Text style={styles.statLabel}>通过率</Text>
            </View>
            <View style={styles.statItem}>
              <Text style={styles.statValue}>2.1h</Text>
              <Text style={styles.statLabel}>平均时长</Text>
            </View>
          </View>
        </LinearGradient>

        {/* 功能菜单区域 */}
        <View style={styles.menuSection}>
          <View style={styles.menuList}>
            {/* 我的资料 */}
            <TouchableOpacity style={styles.menuItem} onPress={handleProfilePress}>
              <View style={styles.menuItemContent}>
                <View style={styles.menuItemLeft}>
                  <LinearGradient
                    colors={['#969FFF', '#5147FF']}
                    start={{ x: 0, y: 0 }}
                    end={{ x: 1, y: 1 }}
                    style={styles.menuIcon}
                  >
                    <FontAwesome5 name="user-edit" size={16} color="#FFFFFF" />
                  </LinearGradient>
                  <View style={styles.menuTextContainer}>
                    <Text style={styles.menuTitle}>我的资料</Text>
                    <Text style={styles.menuSubtitle}>查看和编辑个人信息</Text>
                  </View>
                </View>
                <FontAwesome6 name="chevron-right" size={14} color="#6B7280" />
              </View>
            </TouchableOpacity>

            {/* 通知设置 */}
            <TouchableOpacity style={styles.menuItem} onPress={handleNotificationPress}>
              <View style={styles.menuItemContent}>
                <View style={styles.menuItemLeft}>
                  <LinearGradient
                    colors={['#60A5FA', '#3B82F6']}
                    start={{ x: 0, y: 0 }}
                    end={{ x: 1, y: 1 }}
                    style={styles.menuIcon}
                  >
                    <FontAwesome6 name="bell" size={16} color="#FFFFFF" />
                  </LinearGradient>
                  <View style={styles.menuTextContainer}>
                    <Text style={styles.menuTitle}>通知设置</Text>
                    <Text style={styles.menuSubtitle}>管理通知方式和偏好</Text>
                  </View>
                </View>
                <FontAwesome6 name="chevron-right" size={14} color="#6B7280" />
              </View>
            </TouchableOpacity>

            {/* 账户安全 */}
            <TouchableOpacity style={styles.menuItem} onPress={handleSecurityPress}>
              <View style={styles.menuItemContent}>
                <View style={styles.menuItemLeft}>
                  <LinearGradient
                    colors={['#4ADE80', '#22C55E']}
                    start={{ x: 0, y: 0 }}
                    end={{ x: 1, y: 1 }}
                    style={styles.menuIcon}
                  >
                    <FontAwesome6 name="shield-halved" size={16} color="#FFFFFF" />
                  </LinearGradient>
                  <View style={styles.menuTextContainer}>
                    <Text style={styles.menuTitle}>账户安全</Text>
                    <Text style={styles.menuSubtitle}>密码和安全设置</Text>
                  </View>
                </View>
                <FontAwesome6 name="chevron-right" size={14} color="#6B7280" />
              </View>
            </TouchableOpacity>

            {/* 关于我们 */}
            <TouchableOpacity style={styles.menuItem} onPress={handleAboutPress}>
              <View style={styles.menuItemContent}>
                <View style={styles.menuItemLeft}>
                  <LinearGradient
                    colors={['#A78BFA', '#8B5CF6']}
                    start={{ x: 0, y: 0 }}
                    end={{ x: 1, y: 1 }}
                    style={styles.menuIcon}
                  >
                    <FontAwesome6 name="circle-info" size={16} color="#FFFFFF" />
                  </LinearGradient>
                  <View style={styles.menuTextContainer}>
                    <Text style={styles.menuTitle}>关于我们</Text>
                    <Text style={styles.menuSubtitle}>版本信息和帮助</Text>
                  </View>
                </View>
                <FontAwesome6 name="chevron-right" size={14} color="#6B7280" />
              </View>
            </TouchableOpacity>
          </View>
        </View>

        {/* 退出登录按钮 */}
        <View style={styles.logoutSection}>
          <TouchableOpacity style={styles.logoutButton} onPress={handleLogoutPress}>
            <LinearGradient
              colors={['#FF6B6B', '#FF8E8E']}
              start={{ x: 0, y: 0 }}
              end={{ x: 1, y: 1 }}
              style={styles.logoutButtonGradient}
            >
              <FontAwesome6 name="right-from-bracket" size={16} color="#FFFFFF" />
              <Text style={styles.logoutButtonText}>退出登录</Text>
            </LinearGradient>
          </TouchableOpacity>
        </View>
      </ScrollView>

      {/* 退出登录确认弹窗 */}
      <Modal
        visible={isLogoutModalVisible}
        transparent={true}
        animationType="fade"
        onRequestClose={handleCancelLogout}
      >
        <TouchableOpacity 
          style={styles.modalOverlay} 
          activeOpacity={1} 
          onPress={handleModalBackgroundPress}
        >
          <View style={styles.modalContainer}>
            <TouchableOpacity activeOpacity={1}>
              <View style={styles.modalContent}>
                <View style={styles.modalIconContainer}>
                  <FontAwesome6 name="right-from-bracket" size={24} color="#EF4444" />
                </View>
                <Text style={styles.modalTitle}>确认退出登录</Text>
                <Text style={styles.modalSubtitle}>退出后需要重新登录才能使用应用</Text>
                <View style={styles.modalButtons}>
                  <TouchableOpacity style={styles.cancelButton} onPress={handleCancelLogout}>
                    <Text style={styles.cancelButtonText}>取消</Text>
                  </TouchableOpacity>
                  <TouchableOpacity style={styles.confirmButton} onPress={handleConfirmLogout}>
                    <LinearGradient
                      colors={['#FF6B6B', '#FF8E8E']}
                      start={{ x: 0, y: 0 }}
                      end={{ x: 1, y: 1 }}
                      style={styles.confirmButtonGradient}
                    >
                      <Text style={styles.confirmButtonText}>确认退出</Text>
                    </LinearGradient>
                  </TouchableOpacity>
                </View>
              </View>
            </TouchableOpacity>
          </View>
        </TouchableOpacity>
      </Modal>
    </SafeAreaView>
  );
};

export default UserCenterScreen;

